import React, { useMemo } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import styles from './index.module.css'
import { loadBills } from '../../services/paymentService'

const PaymentDetail = () => {
  const navigate = useNavigate()
  const { id } = useParams()
  const bill = useMemo(() => loadBills().find(b => String(b.id) === String(id)) || {}, [id])

  return (
    <div className={styles.page}>
      <TopNavbar title="缴费订单详情" showBack onBack={() => navigate(-1)} />
      <div className={styles.container}>
        <div className={styles.status}>
          <span className={styles.statusIcon}>✅</span>
          <span className={styles.statusText}>{bill.status || '已缴费'}</span>
        </div>

        <div className={styles.ticket}>
          <div className={styles.bar} />
          <div className={styles.orderNo}>{bill.billNo || id}</div>
          <div className={styles.tip}>取药或检查时请出示此码</div>
        </div>

        <div className={styles.block}>
          <div className={styles.blockTitle}>缴费信息</div>
          <div className={styles.row}><span>登记号：</span><span>{bill.billNo || id}</span></div>
          <div className={styles.row}><span>就诊人：</span><span>{bill.patientName || '-'}</span></div>
          <div className={styles.row}><span>就诊科室：</span><span>{bill.department || '-'}</span></div>
          <div className={styles.row}><span>开单医生：</span><span>{bill.doctorName || '-'}</span></div>
          <div className={styles.row}><span>开单时间：</span><span>{bill.billDate || '-'}</span></div>
        </div>

        <div className={styles.block}>
          <div className={styles.blockTitle}>费用明细</div>
          <div className={styles.subTip}>请前往一楼门诊药房2号窗口取药</div>
          <div className={styles.category}><span className={styles.tagBlue}>药</span><span>药品</span><span className={styles.subtotal}>小计：¥ 100.13</span></div>
          <ol className={styles.list}>
            <li>寇宫止血颗粒*3盒 <span>¥ 50.13</span></li>
            <li>维生素B1*2瓶 <span>¥ 20.00</span></li>
            <li>维生素B2*2瓶 <span>¥ 10.00</span></li>
            <li>维生素E*2瓶 <span>¥ 10.00</span></li>
            <li>维生素C*2瓶 <span>¥ 10.00</span></li>
          </ol>
          <div className={styles.subTipYellow}>请前往门诊三楼放射科进行检查</div>
          <div className={styles.category}><span className={styles.tagYellow}>查</span><span>检查</span><span className={styles.subtotal}>小计：¥ 420.00</span></div>
          <ol className={styles.list}>
            <li>CT <span>¥ 200.00</span></li>
            <li>上腹部CT平扫 <span>¥ 220.00</span></li>
          </ol>
          <div className={styles.total}>合计：<span>¥ {Number(bill.amount || 520.13).toFixed(2)}</span></div>
        </div>

        <div className={styles.block}>
          <div className={styles.blockTitle}>订单信息</div>
          <div className={styles.row}><span>订单号：</span><span>{bill.billNo || id}</span></div>
          <div className={styles.row}><span>订单流水号：</span><span>400012{bill.billNo || id}</span></div>
          <div className={styles.row}><span>订单金额：</span><span>¥ {Number(bill.amount || 520.13).toFixed(2)}</span></div>
          <div className={styles.row}><span>订单状态：</span><span>已支付</span></div>
          <div className={styles.row}><span>支付方式：</span><span>微信支付</span></div>
          <div className={styles.row}><span>下单时间：</span><span>{bill.billDate || '-'}</span></div>
          <div className={styles.row}><span>支付时间：</span><span>{bill.billDate || '-'}</span></div>
        </div>
      </div>
    </div>
  )
}

export default PaymentDetail


